<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义指令</title>
  <script src="../js/vue.js"></script>
</head>

<!-- 
  bind(element, binding)	 指令与元素成功绑定时调用(一上来就会调用)
  inserted(element, binding)指令所在元素被插入页面时调用
  update(element, binding)	 指令所在模板结构被重新解析时调用
  element就是DOM元素，binding就是要绑定的对象，它包含以下属性：name value oldValue expression arg modifiers
  
  a,指令定义时不加v-，但使用时要加v-
  b,指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名 

  指令中的this指向windos而不是vue实例
-->

<body>
  <div id="root">
    <h1>{{a}}</h1>
    <input v-fbind="a" v-model="a"></input>
    <h1>{{b}}</h1>
    <input v-fbind1="b" v-model="b"></input>
    <h1>{{c}}</h1>
    <div v-big-number="c"></div>
  </div>

</body>

<script type="text/javascript">
  Vue.config.productionTip = false;

  // 全局注册指令
  Vue.directive('fbind', {
    // 指令与元素成功绑定时（一上来）
    bind(element, binding) {	// element就是DOM元素，binding就是要绑定的
      element.value = binding.value
    },
    // 指令所在元素被插入页面时
    inserted(element, binding) {
      element.focus()
    },
    // 指令所在的模板被重新解析时
    update(element, binding) {
      element.value = binding.value
    }
  })

  new Vue({
    el: '#root',
    data: {
      a: 1,
      b: 2,
      c: 3
    },
    methods: {},
    directives: {
      // 局部注册指令
      'big-number'(element, binding) {
        element.innerText = binding.value * 10
      },
      fbind1: {
        // 指令与元素成功绑定时（一上来）
        bind(element, binding) {
          element.value = binding.value
        },
        // 指令所在元素被插入页面时
        inserted(element, binding) {
          element.focus()
        },
        // 指令所在的模板被重新解析时
        update(element, binding) {
          element.value = binding.value
        }
      }
    }
  })
</script>

</html>